<template>
  <div class="goodlist_container">
    <div v-for="(fItem, index) in typeTwoDataList" :key="index">
      <div class="title" :ref="index + 'ref'">{{ typeTwoList[index] }}</div>
      <div class="good">
        <div class="box" v-for="(item, index) in fItem" :key="item.Id">
          <div class="item" @click="goDetail(item.Id)">
            <el-image :src="item.imageUrl">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <div>
              <div class="title">{{ item.title }}</div>
              <div class="footer">
                <div class="price">￥{{ item.priceStr }}</div>
                <div class="together">
                  <div class="jx">精选</div>
                  <div class="pin">一起拼</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foor">此处不做任何注释</div>
    <!-- 导航 -->
    <div class="fixed">
      <div class="fixed_box">
        <a
          class="item"
          :class="{ active: activeIndex == index }"
          v-for="(item, index) in typeTwoList"
          :key="index"
          @click="toScroll(index)"
          >{{ item }}</a
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "GoodList",
  props: [],
  data() {
    return {
      activeIndex: 0,
      offettopList: [],
    };
  },
  computed: {
    ...mapState(["typeTwoList", "typeTwoDataList"]),
  },
  watch: {
    typeTwoList: {
      immediate: true,
      handler(newValue, oldValue) {
        if (newValue.length == 0) this.$router.push("/dashboard");
      },
    },
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.onscroll);
  },
  methods: {
    //点击商品进入detail页面
    goDetail(id) {
      this.$router.push({ name: "detail", params: { id } });
      scrollTo({
        top: 0,
      });
    },
    //点击右边楼层开始滚动
    toScroll(index) {
      scrollTo({
        top: this.$refs[index + "ref"][0].offsetTop - 190,
        behavior: "smooth",
      });
    },
    //楼层滚动
    onscroll() {
      for (let index = 0; index < this.typeTwoList.length; index++) {
        let top = (this.$refs[index + "ref"][0] || {}).offsetTop;
        if (document.documentElement.scrollTop >= top - 200) {
          this.activeIndex = index;
        }
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.floorScroll);
  },
};
</script>

<style lang="less" scoped>
.goodlist_container {
  .title {
    text-align: center;
    font-size: 40px;
    font-weight: 900;
    background-color: skyblue;
    margin-bottom: 10px;
  }
  .good {
    display: flex;
    flex-wrap: wrap;
    .box {
      width: 20%;
      padding: 0 10px;
      margin: 0 0 10px 0;
      .item {
        border: 1px solid #000;
        height: 232px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img {
          width: 100%;
        }
        .title {
          width: 100%;
          font-size: 20px;
          font-weight: 700;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .footer {
          display: flex;
          justify-content: space-between;
          .price {
            font-size: 15px;
            color: red;
            font-weight: 900;
          }
          .together {
            display: flex;
            align-items: center;
            .jx {
              font-size: 12px;
              color: #fff;
              background-color: rgb(218, 75, 218);
            }
            .pin {
              font-size: 12px;
              color: red;
            }
          }
        }
      }
    }
  }
  .fixed {
    position: fixed;
    top: 280px;
    left: 20px;
    border: 2px solid purple;
    border-radius: 10px;
    padding: 5px;
    background-color: #fff;
    .fixed_box {
      text-align: center;
      width: 200px;
      .item {
        display: block;
        text-decoration: none;
        font-size: 20px;
        margin: 10px 0;
        cursor: pointer;
      }
      .active {
        text-shadow: 0 0 5px purple;
      }
    }
  }
  .foor {
    height: 500px;
    font-size: 40px;
    line-height: 500px;
    font-weight: 700;
    text-align: center;
  }
}
</style>